<script setup lang="ts">
//@ts-nocheck
import {computed, provide, ref, watch, watchEffect} from "vue";

const item_list = ref([])


provide('test-provide', {
  push_item: (item_row)=>{
    return item_list.value.push(item_row)-1
  },
  change_item(index, key, value){
    console.log(index, key, value, 'change_item')
    if (item_list.value[index]){
      item_list.value[index][key] = value;
    }
  },
  delete_item: (index)=>{
    delete item_list.value[index];
  },
})

const sum_value = computed(()=>{
  let res = '';
  Object.values(item_list.value).forEach(({props})=>{
    res += props.modelValue;
  })
  return res;
})

watch(item_list, (v, oldV)=>{
  console.log(v)
},
{ deep: true })

function init(data){
  Object.values(item_list.value).forEach((item)=>{
    let name = item.props.name;
    let val = data[name];
    if (typeof val !== 'undefined') item.update_value(val)
  })
}

defineExpose({
  init
})

</script>

<template>
  <div class="outer">
    <h1>合计:{{sum_value}}</h1>
    <slot></slot>
  </div>
</template>

<style scoped>

</style>